<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>百度一下，你就知道</title>
        <link href="附件/style.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="附件/index.js"></script>
    </head>
    <body>
        <div class="web-outer">
            <div id="head">
                <div id="top-left">
                    <a href="http://news.baidu.com/" target="_blank">新闻</a>
                    <a href="https://www.hao123.com" target="_blank">hao123</a>
                    <a href="http://map.baidu.com" target="_blank">地图</a>
                    <a href="https://live.baidu.com/" target="_blank">直播</a>
                    <a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a>
                    <a href="http://tieba.baidu.com" target="_blank">贴吧</a>
                    <a href="http://xueshu.baidu.com" target="_blank">学术</a>
                </div>
                <div id="top-right">
                    <div id="top-login-btn">登录</div>
                </div>
            </div>
            <div id="outer-mid">
                
                <div id="mid">
                    <div id="logo-outer">
                        <figure id="logo" title="点击一下，了解更多"></figure>
                    </div>
                    <div id="search-div">
                        <div id="search-input">
                            <input id="input-content">
                            <div id="search-btn">百度一下</div>
                        </div>
                    </div>
                    <div id="hot-title">百度热榜</div>
                    <ul id="hot">
                        <li>
                            <span class="hot-order hot-order-1">1</span><span class="hot-content">延迟退休实施原则公布</span><span class="hot-tag hot">热</span>
                        </li>
                        <li>
                            <span class="hot-order">4</span><span class="hot-content">驻港公署:干预香港事务是痴心妄想</span>
                        </li>
                        <!-- TODO: 完成剩余部分的代码 -->
                    </ul>
                </div>
            </div>
            <div id="my-hot">
                <div class="hot_title">
                    <img src="img/game.png">
                    <div id="title" style="color:deepskyblue;">热榜之《19241032》分榜</div>
                    <div id="more" style="color:gray;">更多></div>
                </div>
                <div class="no1">
                    <div class="left">
                        <img src="img/genshin.jpg">
                        <div class="num">1</div>
                    </div>
                    <div class="right">
                        <div class="name" style="font-weight: 600;">原神</div>
                        <div class="hot-value">热搜指数:324853</div>
                        <img src="img/up.png" class="hot-img">
                        <div class="type" style="color: gray;">手机游戏</div>
                    </div>
                </div>
                <div class="container">
                    <div class="num" style="color:crimson;">2</div>
                    <div class="name">香肠派对</div>
                    <div class="hot-value">168931</div>
                    <img src="img/up.png" class="hot-img">
                </div>
                <div class="container">
                    <div class="num" style="color:orange">3</div>
                    <div class="name">王者荣耀</div>
                    <div class="hot-value">161167</div>
                    <img src="img/heng.png" class="hot-img">
                </div>
                <div class="container">
                    <div class="num">4</div>
                    <div class="name">我的世界</div>
                    <div class="hot-value">127320</div>
                    <img src="img/up.png" class="hot-img">
                </div>
                <div class="container">
                    <div class="num">5</div>
                    <div class="name">和平精英</div>
                    <div class="hot-value">123379</div>
                    <img src="img/heng.png" class="hot-img">
                </div>
                <div class="container">
                    <div class="num">6</div>
                    <div class="name">植物大战僵尸</div>
                    <div class="hot-value">88496</div>
                    <img src="img/up.png" class="hot-img">
                </div>
                <div class="container">
                    <div class="num">7</div>
                    <div class="name">迷你世界</div>
                    <div class="hot-value">79547</div>
                    <img src="img/up.png" class="hot-img">
                </div>
                <div class="container">
                    <div class="num">8</div>
                    <div class="name">光遇</div>
                    <div class="hot-value">76194</div>
                    <img src="img/heng.png" class="hot-img">
                </div>
                <div class="container">
                    <div class="num">9</div>
                    <div class="name">泰拉瑞亚</div>
                    <div class="hot-value">54000</div>
                    <img src="img/up.png" class="hot-img">
                </div>
                <div class="container">
                    <div class="num">10</div>
                    <div class="name">绝地求生</div>
                    <div class="hot-value">49095</div>
                    <img src="img/up.png" class="hot-img">
                </div>
            </div>
            <div id="footer">本网页仅用于软工实验使用</div>
            <!-- 引入核心代码，请不要修改 -->
            <script src="code/index.js"></script>
        </div>
        <style>
            #logo{
                background-image: url('./img/logo.png');
            }
        </style>
    </body>
</html>